<template>
    <!-- 新增/编辑用户 -->
    <el-drawer
        v-model="userParams.visible"
        :title="dialogTitle"
        @open="handleOpen"
        size="500"
        :close-on-click-modal="true"
    >
        <!-- {{ formData }} -->
        <div class="drawer-main" v-loading="loading">
            <el-form
                ref="ruleFormRef"
                :model="formData"
                :rules="rules"
                label-width="90"
            >
                <el-form-item label="用户名" prop="userName">
                    <el-input
                        v-model.trim="formData.userName"
                        maxlength="60"
                        clearable
                        placeholder="请输入用户名"
                    />
                </el-form-item>
                <!-- <el-form-item label="用户昵称" prop="nickName">
  <el-input v-model.trim="formData.nickName" maxlength="60" clearable placeholder="请输入用户昵称" />
</el-form-item> -->
                <el-form-item label="所属部门" prop="deptId">
                    <el-tree-select
                        v-model="formData.deptId"
                        :data="deptOptions"
                        check-strictly
                        multiple
                        :render-after-expand="false"
                        :props="defaultProps"
                        clearable
                        placeholder="请选择所属部门"
                    />
                </el-form-item>
                <!-- <el-form-item label="角色" prop="roleIds">
            <el-select
                v-model="formData.roleIds"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="3"
                placeholder="请选择角色"
            >
                <el-option
                    v-for="item in roleOptions"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId"
                />
            </el-select>
        </el-form-item> -->
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="formData.sex" placeholder="请选择性别">
                        <el-option label="男" :value="1" />
                        <el-option label="女" :value="2" />
                        <el-option label="保密" :value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input
                        v-model.trim="formData.phone"
                        maxlength="60"
                        clearable
                        placeholder="请输入手机号码"
                    />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input
                        v-model.trim="formData.email"
                        maxlength="60"
                        clearable
                        placeholder="请输入邮箱"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="enable">
                    <el-radio-group v-model="formData.enable">
                        <el-radio :value="1">正常</el-radio>
                        <el-radio :value="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="emit('close')">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { reactive, ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getRolePage } from '@views/roleManage/api/roleManage'
import { saveOrUpdateUser } from '@views/userManage/api/userManage'

const props = defineProps({
    userParams: {
        type: Object,
        default: () => {},
        required: true
    }
})

const emit = defineEmits(['close'])
const formData = reactive({ enable: 1 })
const ruleFormRef = ref(null)
const loading = ref(false)
const dialogTitle = computed(() =>
    props.userParams.row?.userId ? '编辑用户' : '新增用户'
)
const deptOptions = ref([])
const defaultProps = { label: 'deptName', value: 'deptId' }
// const roleOptions = ref([])
const rules = reactive({
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    // nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
    deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
    // roleIds: [{ required: true, message: '请选择角色', trigger: 'change' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    enable: [{ required: true, message: '请选择状态', trigger: 'change' }]
})
const handleSubmit = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            handleSave()
        } else {
            return false
        }
    })
}
const handleSave = async () => {
  console.log(formData.deptId)
  formData.deptId = formData.deptId.join(',')
    loading.value = true
    const res = await saveOrUpdateUser(formData)
    loading.value = false
    if (res?.code === 200) {
        ElMessage.success('保存成功')
        emit('close', true)
    }
}

const getRoleData = async () => {
    loading.value = true
    const res = await getRolePage({ pageNo: 1, pageSize: 10000 })
    loading.value = false
    if (res?.code === 200) {
        roleOptions.value = res.data.records || []
    }
}

// 初始化弹窗
const handleOpen = () => {
    // getRoleData()

    nextTick(() => {
        ruleFormRef.value.resetFields()
        deptOptions.value = props.userParams.deptOptions
        console.log(deptOptions.value)
        let row = props.userParams.row

        if (row.userId) {
            // 编辑
            formData.userId = row.userId
            formData.userName = row.userName
            // formData.nickName = row.nickName
            formData.deptId = row.deptId.split(',')
            // formData.roleIds = row.roleIds || []
            formData.sex = Number(row.sex)
            formData.phone = row.phone
            formData.email = row.email
            formData.enable = Number(row.enable)
          console.log(formData)
        } else {
            // 新增
            formData.userId = ''
        }
        console.log('初始化')
    })
}
</script>

<style lang="scss" scoped></style>
